import React, { useEffect, useContext, FC } from 'react'
import "./Zoom.scss"
import { FullscreenOutlined } from '@ant-design/icons';
import { Button } from 'antd';
import { fullScreenCtx } from './Zoom';
import "./FullScreen.scss"

interface IProps {
    imgSrc: string
}
const FullScreen: FC<IProps> = ({ imgSrc }) => {
    const { isFullScreen, setIsFullScreen } = useContext(fullScreenCtx)
    useEffect(() => {
        if (isFullScreen) {
            document.body.style.height = '100vh'
            document.body.style.overflow = 'hidden'
        } else {
            document.body.style.height = 'auto'
            document.body.style.overflow = 'auto'
        }
    }, [isFullScreen])
    return isFullScreen ? <div className="im_full_screen">
        <img src={imgSrc} alt="" className="im_full_screen_img" />
        <Button className="im_full_screen_btn" icon={<FullscreenOutlined size={20} />} onClick={() => { setIsFullScreen(false) }}></Button>
    </div> : <></>
}

export default FullScreen